<!-- v-bind对于样式控制的增强-操作style
语法:style="样式对象"
<div class="box":style="{ CSS属性名1：CSS属性值，CSs属性名2：CSS属性值}"></div>
适用场景：某个具体属性的动态设置 -->
<style>
    .box {
        width: 200px;
        height: 200px;
        background-color: rgb(187, 150, 156);
    }
</style>
<!-- 两种写法一是加上单引号,二是写成驼峰命名 -->
<div id="app">
    <div class="box" :style="{width:'400px',height:'400px','background-color':'green'}"></div>
    <div class="box" :style="{width:'400px',height:'400px',backgroundColor:'green'}"></div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {

        }
    })
</script>